import { Directive } from 'vue';

/**
 * 自动绑定非 prop 属性到第一个子元素
 * 解决多根节点组件的属性继承警告
 */
export const autoAttrs: Directive = {
  mounted(el, { value }) {
    if (!el.firstElementChild) return;
    
    // 绑定所有非 prop 属性
    const attrs = value || {};
    Object.keys(attrs).forEach(attr => {
      if (attr.startsWith('on')) {
        // 处理事件监听器
        const eventName = attr.slice(2).toLowerCase();
        el.firstElementChild.addEventListener(eventName, attrs[attr]);
      } else {
        // 处理普通属性
        el.firstElementChild.setAttribute(attr, attrs[attr]);
      }
    });
  },
  beforeUnmount(el, { value }) {
    if (!el.firstElementChild) return;
    
    const attrs = value || {};
    Object.keys(attrs).forEach(attr => {
      if (attr.startsWith('on')) {
        const eventName = attr.slice(2).toLowerCase();
        el.firstElementChild.removeEventListener(eventName, attrs[attr]);
      }
    });
  }
};
